<template>
    <div id="each-invoice">
        <!-- 每张发票详情 -->
        <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                        <div class="left"
                            slot="left">
                            <van-icon name="arrow-left"
                                    size="24px"
                                    color="#fff" />
                        </div>
                        <div class="title"
                            slot="title">{{title}}</div>
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content">
                    <van-cell-group title="发票详情" class="group-case">
                        <div class="mid-case">
                            <div class="cell-title">抬头类型</div>
                            <div class="content-case">
                                <van-radio-group v-model="invoiceType">
                                    <van-radio name="1" style="margin-right: 0.6rem;">企业单位</van-radio>
                                    <van-radio name="2">非企业单位</van-radio>
                                </van-radio-group>
                            </div>
                        </div>
                    </van-cell-group>
                    <van-cell-group class="group-case">
                        <div class="mid-case">
                            <div class="cell-title">发票抬头</div>
                            <div class="content-case">
                                <input type="text" :placeholder="companyNameP"  maxlength="100" v-model="companyName" ref="inputName" @click="focusName">
                            </div>
                        </div>
                    </van-cell-group>
                    <van-cell-group class="group-case" v-if="invoiceType == 1">
                        <div class="mid-case">
                            <div class="cell-title">企业税号</div>
                            <div class="content-case">
                                <input type="text" :placeholder="companyNumP"  maxlength="50" v-model="companyNum" ref="inputNum" @click="focusNum">
                            </div>
                        </div>
                    </van-cell-group>
                    <van-cell-group class="group-case">
                        <div class="mid-case">
                            <div class="cell-title">发票内容</div>
                            <div class="content-case">
                                <input type="text" :placeholder="companyMemoP"  maxlength="100" v-model="companyMemo" ref="inputMemo" @click="focusMemo">
                            </div>
                        </div>
                    </van-cell-group>
                    <van-cell-group class="group-case">
                        <div class="mid-case">
                            <div class="cell-title">发票金额</div>
                            <div class="content-case"><span>{{invoiceMoney}}</span>元</div>
                        </div>
                    </van-cell-group>
                    <van-cell-group title="接收方式" class="group-case">
                        <div class="mid-case" @click="addAddress">
                            <div class="address-content">
                                <div class="left-case">
                                    <div class="has-case"   v-if="detailsAddress != null ">
                                        <div class="name-phone">
                                            <div class="name-case" v-if="JSON.stringify(detailsAddress)  != '{}'">{{detailsAddress.userName}}</div>
                                            <div class="phone-case" v-if="JSON.stringify(detailsAddress)  != '{}'">{{detailsAddress.phone}}</div>
                                        </div>
                                        <div class="address-details" v-if="JSON.stringify(detailsAddress)  != '{}'">{{detailsAddress.provinceName}}{{detailsAddress.cityName}}{{detailsAddress.areaName}}{{detailsAddress.addressInfo}}</div>
                                    </div>
                                    <div class="no-case"  v-if="detailsAddress == null || JSON.stringify(detailsAddress) == '{}'">
                                        <div class="img-case"><img src="@/assets/img/designer/personalCenter/address.png" alt=""></div>
                                        <div class="other-case">选择联系方式及地点</div>
                                    </div>
                                </div>
                                <div class="right-case"><img src="@/assets/img/performance/personalCenter/rightarrow.png" alt=""></div>
                            </div>
                            <div class="bar-decoration"><img src="@/assets/img/public/addressBot.png" alt=""></div>
                        </div>
                    </van-cell-group>
                    <van-cell-group class="group-case">
                        <div class="mid-case">
                            <div class="cell-title">邮费支付</div>
                            <div class="content-case">
                                <van-radio-group v-model="payType">
                                    <van-radio name="1" style="margin-right: 0.6rem;">普通到付</van-radio>
                                    <van-radio name="2">顺丰到付</van-radio>
                                </van-radio-group>
                            </div>
                         </div>
                    </van-cell-group>
                </div>
            </div>
            <div class="btn-case bgwrite">
                <div class="active-btn"  v-if="submitB" @click="submitInvoice">提交申请</div>
                <div class="disable-btn" v-if="!submitB">提交申请</div>
            </div>
      </div>
    </div>
</template>
<script>
import {getuserUid} from '@/utils/auth.js'
import { mapMutations, mapState } from "vuex";
import { noEmoji } from "@/utils/noEmoji";
export default {
  components: {
  },
  data() {
    return {
      title: '开具纸质发票',
      submitB: true,
      invoiceType:  '1',
      payType: '1',
      companyName: '',
      companyNameP: '请输入发票抬头',
      companyNum: '',
      companyNumP: '请输入税号',
      companyMemo: '',
      companyMemoP: '请输入详细内容',
      detailsAddress: {},
      emoji: false
    }
  },
  computed: {
      ...mapState({
          invoiceId: state => state.invoiceId,
          invoiceObj: state=>state.invoiceObj,
          invoiceMoney: state=> state.invoiceMoney,
          editAddrerss: state=> state.editAddrerss
      })
  },
  created() {
      if (this.$route.params.fromW == "addressList"){
          this.invoiceType = this.invoiceObj.invoiceType
          this.companyName = this.invoiceObj.companyName
          this.companyNum = this.invoiceObj.companyNum
          this.companyMemo = this.invoiceObj.companyMemo
          this.payType = this.invoiceObj.payType
          this.detailsAddress = this.editAddrerss
      }
  },
  methods: {
      // 聚焦名字
      focusName() {
          this.$refs.inputName.focus()
      },
      // 聚焦名字
      focusNum() {
          this.$refs.inputNum.focus()
      },
      // 聚焦名字
      focusMemo() {
          this.$refs.inputMemo.focus()
      },
      diffBack(){
          this.$router.push('/designer/applyInvoices')
      },
    //  提交发票申请
      submitInvoice(){
          if(this.companyName == "") {
              this.$toast('发票抬头无法为空')
              this.companyNameP = "发票抬头无法为空"
              return false;
            // 开企业税号
          } else if (this.companyName !== "") {
            for (let i of this.companyName) {
                if (noEmoji(i)) {
                    this.emoji = true;
                    break;
                } 
                }
                if (this.emoji) {
                    this.emoji=false
                    this.companyName = ""
                    this.$toast('内容只限数字，中文，英文哦~~')
                    return false
                } else {
                    if (this.invoiceType == 1) {
                        if (this.companyNum == ""){
                            this.$toast('企业税号无法为空')
                            this.companyNumP = "企业税号无法为空"
                            return false;
                        }  else if (this.companyNum !== "") {
                            for (let i of this.companyNum) {
                            if (noEmoji(i)) {
                                this.emoji = true;
                                break;
                            } 
                            }
                            if (this.emoji) {
                            this.emoji=false
                            this.companyNum = ""
                            this.$toast('内容只限数字，中文，英文哦~~')
                            return false
                            } else {
                               if (this.companyMemo == "") {
                                    this.$toast('发票内容无法为空')
                                    this.companyMemoP = "发票内容无法为空"
                                    return false;
                                    this.companyMemoP = "发票内容无法为空"
                                }  else if (this.companyMemo !== "") {
                                    for (let i of this.companyMemo) {
                                        if (noEmoji(i)) {
                                            this.emoji = true;
                                            break;
                                        } 
                                    }
                                    if (this.emoji) {
                                        this.emoji=false
                                        this.companyMemo = ""
                                        this.$toast('内容只限数字，中文，英文哦~~')
                                        return false
                                    } else {
                                        if (Object.keys(this.detailsAddress).length == 0) {
                                            this.$toast('请选择邮寄地址')
                                            return false;
                                        } else {
                                            // 新增
                                           this.invoiceOrder()
                                        }
                                    }
                                }
                            }
                        }
                    }  else if (this.invoiceType == 2) {
                          if (this.companyMemo == "") {
                                    this.$toast('发票内容无法为空')
                                    this.companyMemoP = "发票内容无法为空"
                                    return false;
                                    this.companyMemoP = "发票内容无法为空"
                            } else if (this.companyMemo !== "") {
                                for (let i of this.companyMemo) {
                                    if (noEmoji(i)) {
                                        this.emoji = true;
                                        break;
                                    } 
                                }
                                if (this.emoji) {
                                    this.emoji=false
                                    this.companyMemo = ""
                                    this.$toast('内容只限数字，中文，英文哦~~')
                                    return false
                                } else {
                                    if (Object.keys(this.detailsAddress).length == 0) {
                                        this.$toast('请选择邮寄地址')
                                        return false;
                                    } else {
                                        // 新增
                                        this.invoiceOrder()
                                    }
                                }
                           }
                    } 
                    this.submitB = false
                }
            }
      },
      
    //   添加地址
    addAddress(){
        var invoiceObj = new Object();
        invoiceObj.invoiceType = this.invoiceType
        invoiceObj.companyName = this.companyName
        invoiceObj.companyNum = this.companyNum
        invoiceObj.companyMemo = this.companyMemo
        invoiceObj.payType = this.payType
        //还没有处理 地址保存  之后需要跨页面保存
        this.setInvoiceObj(invoiceObj)
        this.$router.push('/designer/addressList')
    },
    // 发票新增
    async invoiceOrder() {
      const SPC = await HTTP("invoiceOrder", {
          orderUid: this.invoiceId,
          invoiceType: this.invoiceType,
          invoiceLookUp: this.companyName,
          enterpriseTaxNumber: this.companyNum?this.companyNum:"",
          content: this.companyMemo,
          money: this.invoiceMoney,
          provinceUid: this.detailsAddress.provinceUid,
          cityUid: this.detailsAddress.cityUid,
          areaUid: this.detailsAddress.areaUid,
          addressDetails: this.detailsAddress.addressInfo,
          postagePayType: this.payType,
          createBy: getuserUid()
      });
      if (SPC.code == 200) {
          const toast = this.$toast.success({
            duration: 2000,       // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            message: '开具发票成功！我们将尽快寄出，请耐心等待'
          });
          let second = 2;
          const timer = setInterval(() => {
            second--;
            if (!second){
              clearInterval(timer);
              this.$toast.clear();
              this.$router.push('/designer/applyInvoices')
            }
          }, 1000);
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    ...mapMutations(['setInvoiceObj'])
  }
};
</script>
<style>
.cell-s{
    width: 150px!important;
    background: pink;
}
</style>

<style lang="scss" scoped>
#each-invoice {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    .deposit-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
            }
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            top: 0.92rem;
            left: 0;
            overflow-y: scroll;
            overflow-x: hidden;
            bottom: 1.6rem;
            .reset-content{
                width: 100%;
                padding: 0.24rem;
                box-sizing: border-box;
                border-radius: 0.1rem;
                .group-case{
                    margin-bottom: 0.24rem;
                    border-radius: 0.1rem;
                    padding: 0.24rem;
                    box-sizing: border-box;
                    width: 100%;
                    .mid-case{
                        width: 100%;
                        position: relative;
                        height: auto;
                        div{
                            display: inline-block;
                            height: 0.52rem;
                            line-height: 0.52rem;
                        }
                        .cell-title{
                            width: 1.8rem;
                            color: #656565;
                            font-size: 0.28rem;
                        }
                        .content-case{
                            position: absolute;
                            left: 1.8rem;
                            border: none;
                            right: 0rem;
                            font-size: 0.28rem;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            span{
                                color: #5E8EFE;
                                font-size: 0.36rem;
                                font-family: PingFangSC-Semibold;
                                font-weight: 600;
                                margin-right: 0.1rem;
                            }
                            input{
                                width: 100%;
                                word-wrap: normal;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                border: none;
                                color: #282828;
                                font-size: 0.28rem;
                                font-family: PingFangSC-Regular;
                                font-weight: 400;

                                &::-webkit-input-placeholder {
                                    color: #CCCCCC;
                                    font-size: 0.28rem;
                                    font-family: PingFangSC-Regular;
                                    font-weight: 400;
                                }
                            }
                        }
                        .address-content{
                            position: relative;
                            width: 100%;
                            height: 2.28rem;
                            .left-case{
                                position: absolute;
                                top:0;
                                left: 0;
                                right: 0.45rem;
                                .no-case{
                                    height: 2.28rem;
                                    line-height: 2.28rem;
                                    .img-case{
                                        width: 0.29rem;
                                        height: 0.36rem;
                                        margin-right: 0.2rem;
                                        img{
                                             width: 0.29rem;
                                            height: 0.36rem;
                                        }
                                    }
                                    .other-case{
                                        color: #656565;
                                        font-size: 0.28rem;
                                        font-family: PingFangSC-Regular;
                                        font-weight: 400;
                                    }
                                }
                                .has-case{
                                    height: 2.28rem;
                                   .name-phone{
                                       width: 100%;
                                       margin-bottom: 0.2rem;
                                       div{
                                           display: inline-block;
                                           color: #282828;
                                           font-size: 0.36rem;
                                           font-family: PingFangSC-Semibold;
                                           font-weight: 600;
                                       }
                                       .name-case{
                                            max-width: 50%;
                                            padding-right: 0.4rem;
                                            word-wrap: normal;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            overflow: hidden;
                                       }
                                       .phone-case{
                                           vertical-align: top;
                                       }
                                   } 
                                   .address-details{
                                       height: 0.88rem;
                                       color: #282828;
                                       font-size: 0.28rem;
                                       font-family: PingFangSC-Regular;
                                       font-weight: 400;
                                       line-height: 0.44rem;
                                       display:-webkit-box;
                                       overflow:hidden;
                                       text-overflow:ellipsis;
                                       -webkit-line-clamp:2;
                                       -webkit-box-orient:vertical;
                                   }
                                }
                            }
                            .right-case{
                                position: absolute;
                                width: 0.14rem;
                                top: 50%;
                                right: 0;
                                transform: translate(0,-50%);
                                img{
                                    height: 0.26rem;
                                    width: 0.14rem;
                                }
                            }

                        }
                        .bar-decoration{
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            height: 0.1rem;
                            img{
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                width: 100%;
                                height: 0.1rem;
                                width: 100%;
                                height: 0.1rem;
                            }
                        }
                    }
                }
            }
        }
        .btn-case{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1.6rem;
            box-sizing: border-box;
            box-shadow:0px 2px 8px 4px rgba(216,216,216,0.5);
            padding: 0.36rem;
            div{
                width: 100%;
                border-radius: 0.1rem;
                height: 0.88rem;
                line-height: 0.88rem;
                text-align: center;
                font-size: 0.26rem;
                font-family: PingFangSC-Semibold;
                font-weight: 600;
                color: #fff;
            }
            .active-btn{
                background: #5E8EFE; 
            }
            .disable-btn{
                background: #DFE8FF;

            }
        }
    }
}
</style>
